<template>
  <div class="error-container">
    <el-result
      icon="error"
      title="错误提示"
      :sub-title="$route.query.msg || '未知错误'"
    >
      <template #extra>
        <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
      </template>
    </el-result>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const errorMessage = computed(() => {
  return route.query.msg || '未知错误'
})

const errorTitle = computed(() => {
  return route.query.title || '操作失败'
})

const showLogin = computed(() => {
  return errorMessage.value.includes('登录') || errorMessage.value.includes('认证')
})

function goHome() {
  router.push('/')
}

function goLogin() {
  router.push('/login')
}
</script>

<style scoped>
.error-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>